{extend name="main"}
{block name="style"}
<style type="text/css">
	.el-tree-node__content {
	    display: flex;
	    align-items: center;
	    height: 40px;
	    cursor: auto;
	}
	.custom-tree-node {
	    flex: 1;
	    display: flex;
	    align-items: center;
	    justify-content: space-between;
	    font-size: 14px;
	    padding-right: .5rem;
	}
	.w-40px{width: 40px;}
	.w-80px{width: 80px;}
	.w-180px{width: 180px;}
	.w-120px{width: 120px;}
	.w-240px{width: 240px;}
	.minw-200px{min-width: 200px;}
</style>
{/block}
{block name="body"}
<div class="bg-white p-3">
	<div class="pb-3">
        <el-button
            type="warning"
            size="mini"
            @click="updateRouteFileAjax">
            更新权限
        </el-button>
	</div>
	<div class="table-responsive">
		<el-table
		    :data="tableData"
		    style="width: 100%"
		    row-key="aid"
		    stripe
		    border
		    lazy
		    :load="initHtml"
		    :tree-props="defaultProps">
		    <el-table-column
		      prop="title"
		      label="权限名称">
		    </el-table-column>
		    <el-table-column
		      prop="url"
		      label="路由"
		      width="180">
		    </el-table-column>
		    <el-table-column
		      prop="title"
		      label="控制器/操作"
		      width="240">
		      <template slot-scope="scope">
		      	{{scope.row.controller}}{{scope.row.fun?'/'+scope.row.fun:scope.row.fun}}
		      </template>
		    </el-table-column>
		    <el-table-column
		      prop="param"
		      label="参数"
		      width="180">
		    </el-table-column>
		    <el-table-column
		      prop="alias"
		      label="别名"
		      width="80">
		    </el-table-column>
		    <el-table-column
		      label="请求方式"
		      width="80">
		      <template slot-scope="scope">
		      	{{scope.row.method?scope.row.method.toUpperCase():''}}
		      </template>
		    </el-table-column>
		    <el-table-column
		      label="图标"
		      width="60">
		      <template slot-scope="scope">
		      	<span v-html="scope.row.icon"></span>
		      </template>
		    </el-table-column>
		    <el-table-column
		      label="状态"
		      width="80">
		      <template slot-scope="scope">
		      	<transition>
		      		<el-button type="success" size="minism"
		      		v-if="scope.row.status==1 || scope.row.status==2" 
		      		@click="setAuthStatus(scope.row);" 
		      		:loading="scope.row.status==2">正常</el-button>
		      		<el-button type="info" size="minism" 
		      		v-else="scope.row.status==0 || scope.row.status==2" 
		      		@click="setAuthStatus(scope.row);" 
		      		:loading="scope.row.status==2">禁用</el-button>
				</transition>
		      </template>
		    </el-table-column>
		    <el-table-column
		      label="菜单栏"
		      width="80">
		      <template slot-scope="scope">
			      	<transition>
			      		<el-button type="success" 
			      		v-if="scope.row.show==1 || scope.row.show==2" 
			      		@click="setAuthShow(scope.row);"
			      		:loading="scope.row.show==2" size="minism">显示</el-button>
			      		<el-button type="info" size="minism"
			      		v-else="scope.row.show==0 || scope.row.show==2"
			      		@click="setAuthShow(scope.row);"
			      		:loading="scope.row.show==2">隐藏</el-button>
					</transition>
		      </template>
		    </el-table-column>
		    <el-table-column
		      label="排序"
		      width="120">
		      <template slot-scope="scope">
					<el-input-number 
					v-model="scope.row.sort" 
					@change="setAuthSort(scope.row)" 
					:min="0" 
					:max="9999"
					size="minism"></el-input-number>
		      </template>
		    </el-table-column>
		    <el-table-column
		      label="/"
		      width="120">
		      <template slot-scope="scope">
		        <el-button
		            type="primary"
		            size="minism"
		            @click="window.open('/editAuth/'+scope.row.aid)">
		            编辑
		        </el-button>
		        <el-button
		            type="danger"
		            size="minism"
		            @click="delAuth(scope.$index, scope.row)">
		            删除
		        </el-button>
		      </template>
		    </el-table-column>
		</el-table>
	</div>
</div>
{/block}
{block name="script"}
<script type="text/javascript">
	var vm=new Vue({
		el:'#app',
		data:{
			view:XYBase.view,
			search:{
				aid:0,
			},
			tableData:[],
	        defaultProps: {
	          children: 'children',
	          hasChildren: 'hasChildren'
	        }
		},
		watch:{
		    view:XYBase.viewWatch,
		},
		created(){
			XYBase.created(this);
		},
	    methods: {
	    	delAuth(index,row){
	      		var _this=this;
		        this.$confirm('是否确定删除【'+row.title+'】权限？', '提示', {
		          confirmButtonText: '删除',
		          cancelButtonText: '取消',
		          dangerouslyUseHTMLString:true,
		          type: 'warning'
		        }).then(() => {
		    		const loading=XYBase.openloading();
		    		$.getJSON('/auth/del/'+row.aid,function(ret){
		    			loading.close();
		    			if (ret) {
		    				if (ret.code === 0) {
		    					_this.initHtml();
		    				}else XYBase.msg(ret.msg);
		    			}else XYBase.error(XYBase.config.system_network_error);
		    		});
		        }).catch(() => {
					XYBase.msg('已取消');
		        });
	    	},
	    	setAuthStatus(data){
	    		if (data.status==2) return;
	    		var status=1,oldStatus=data.status;
	    		if (data.status) status=0;
	    		data.status=2;
	    		$.getJSON('/setAuthStatus/'+data.aid+'/'+status,function(ret){
	    			data.status=oldStatus;
	    			if (ret) {
	    				if (ret.code === 0) {
	    					data.status=status;
	    				}else{
	    					XYBase.msg(ret.msg);
	    				}
	    			}else{
						XYBase.error(XYBase.config.system_network_error);
	    			}
	    		});
	    	},
	    	setAuthShow(data){
	    		if (data.show==2) return;
	    		var show=1,oldShow=data.show;
	    		if (data.show) show=0;
	    		data.show=2;
	    		$.getJSON('/setAuthShow/'+data.aid+'/'+show,function(ret){
	    			data.show=oldShow;
	    			if (ret) {
	    				if (ret.code === 0) {
	    					data.show=show;
	    				}else{
	    					XYBase.msg(ret.msg);
	    				}
	    			}else{
						XYBase.error(XYBase.config.system_network_error);
	    			}
	    		});
	    	},
	    	setAuthSort(data){
	    		$.getJSON('/setAuthSort/'+data.aid+'/'+data.sort,function(ret){
	    			if (ret) {
	    				if (ret.code === 0) {
	    				}else{
	    					XYBase.msg(ret.msg);
					        setTimeout(function (argument) {window.location.reload(); },2000);
	    				}
	    			}else{
						XYBase.error(XYBase.config.system_network_error);
	    			}
	    		});
	    	},
	    	updateRouteFileAjax() {
		        this.$confirm('即将更新权限缓存, 是否继续?', '提示', {
		          confirmButtonText: '继续',
		          cancelButtonText: '取消',
		          type: 'warning'
		        }).then(() => {
		    		const loading=XYBase.openloading();
		    		$.getJSON('/updateRouteFileAjax',function(ret) {
		    			loading.close();
		    			if(ret){
		    				if(ret.code === 0){
		    					XYBase.success(ret.msg);
		    				}else{
		    					XYBase.msg(ret.msg);
		    				}
		    			}else{
							XYBase.error(XYBase.config.system_network_error);
		    			}
		    		});
		        }).catch(() => {
					XYBase.msg('已取消');
		        });
	    	},
	      	initHtml(tree, treeNode, resolve) {
	      		var _this=this;
		      	if (typeof tree != "undefined")
		      		_this.search.aid=tree.aid;
				$.ajax({
					url:'',
					type:'get',
					data:_this.search,
					dataType:'json',
					error:function(err){
						XYBase.error(XYBase.config.system_network_error);
					},
					success:function(ret){
						if (ret) {
							if (ret.code === 0) {
								if (!_this.search.aid) {
									_this.tableData=ret.data;
								}else{
									resolve(ret.data);
								}
							}else{
								XYBase.msg(ret.msg);
							}
						}else{
							XYBase.error(XYBase.config.system_network_error);
						}
					}
				});
			},
	    }
	});
	$(function(){
		vm.initHtml();
	});
</script>
{/block}